<template>
  <div>
    <mainComment
      v-for="(item, index) in commentList"
      :key="index"
      :commentData="item"
    />
  </div>
</template>

<script>
export default {
  components: {
    mainComment: () => import("../components/comment/mainComment"),
  },
  data() {
    return {
      commentList: [
        {
          // content 属性代表当前评论的内容
          content: "哈哈哈",
        },
        {
          content: "从前有座山",
        },
        {
          content: "嘿嘿嘿",
        },
        {
          content: "秋天第一杯奶茶",
        },
        {
          content: "山上有座庙",
          // 被你回复的内容
          // 都会放在当前评论对象
          // 的 parent 属性里面
          parent: {
            content: "从前有座山",
          },
        },
        {
          content: "好不好喝?",
          parent: {
            content: "秋天第一杯奶茶",
          },
        },
        {
          content: "庙里有个和尚在讲故事",
          parent: {
            content: "山上有座庙",
            // 被你回复的内容
            // 都会放在当前评论对象
            // 的 parent 属性里面
            parent: {
              content: "从前有座山",
            },
          },
        },
        {
          content: "讲什么故事呢?",
          parent: {
            content: "庙里有个和尚在讲故事",
            parent: {
              content: "山上有座庙",
              // 被你回复的内容
              // 都会放在当前评论对象
              // 的 parent 属性里面
              parent: {
                content: "从前有座山",
              },
            },
          },
        },
        {
          content: "从前有座山",
          parent: {
            content: "讲什么故事呢?",
            parent: {
              content: "庙里有个和尚在讲故事",
              parent: {
                content: "山上有座庙",
                // 被你回复的内容
                // 都会放在当前评论对象
                // 的 parent 属性里面
                parent: {
                  content: "从前有座山",
                },
              },
            },
          },
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
</style>